The Date Object: JavaScript Clock 1

---

Browser Compatibility:    NS 2.02+, IE 4+

Now, you would like to have a clock for your web page- but how do you go about coding such a clock with JavaScript? Using the date object and some of its methods, you can create your own javascript clock customized to your needs. Our script here will create a fairly simple clock, but we will also discuss some of the other methods of the date object you may wish to use to create and customize your own clock.

To begin, we must discuss the javascript date object. This works a bit differently than the pre-defined functions we have used in past scripts. To use the method functions of the date object, we must create what is called an instance of the date object. Think of an instance of the date object as a variable or placeholder that allows us access to the member functions of the date object. Why think of it as a variable? Well, to create an instance of the date object, you define it as a new variable- but with a lttle twist:

var thetime=new Date();

As you can see, we are not assigning the new variable a direct value. Instead, the code above defines the variable as a new instance of the date object. This means we can use this variable in order to access the method functions of the date object. What are the method functions? Well, here a list of some of them:

Method Function	What the Function Does
getHours()	Returns the current number of hours into the day: (0-23)
getMinutes()	Returns the current number of minutes into the hour: (0-59)
getSeconds()	Returns the current number of seconds into the minute: (0-59)
getDay()	Returns the number of days into the week: (0-6)
getMonth()	Returns the number of months into the year: (0-11)
getYear()	Returns the number of years into the century: (0-99)

These are not all of the method functions, but they are enough to create a decent clock. Our example clock for this tutorial will only use the first three, but the rest my be useful to you to customize your clock.

Now, suppose we want to get the number of hours into the day. We could do this by defining a variable and giving it the value of the getHours() method function. However, the following line will give you an error:

var nhours=getHours();

Why? Well, remember that the getHours() function is a method function of the date object. In order to get that value for our variable, we have to use our instance of the date object we created earlier:

var thetime=new Date();
var nhours=thetime.getHours();

This is part of object-oriented programming. Once we have created an object, we are able to access its member functions with what is called "the dot operator". By placing the dot between our object name (thetime) and its member function, we are able to execute the member function. In this case, the function simply returns a value (the number of hours into the day). We are using this value as the value of our new variable, nhours.

We have used the dot operator in the past, when we used the document.write() function. The write() function is a member function of the document object, and the function writes text to the screen.

An advantage of using objects is that objects can hold multiple values, where variables can only keep one value at a time. An object can also use any member functions it may have, like we did above. So, our date object named thetime can use all of the member functions. Now we can start getting the rest of the values for our clock. Let's get the hours, minutes, and seconds:

var thetime=new Date();
var nhours=thetime.getHours();
var nmins=thetime.getMinutes();
var nsecn=thetime.getSeconds();

See how we were able to use our object named thetime to grab three different values? It's almost fun, then again...yes, a bit more complicated than having a pre-defined object to use.

With these values and a bit of extra coding, we can create a clock like the one below:

Current Time:

Not bad, but now we must get into the extra coding we need to get the clock running smoothly. Remember, thetime.getHours() returns the number of hours into the day. This value is a number between 0 and 23. What can we do if we do not want a 24 hour clock, if we don't want 11:24 P.M. to be 23:24? To get around that, we need some code that will change any number over 12 back to 1,2,3,4, and so on. We can do this by subtracting 12 from our variable nhours when it has a value greater than 12:

if (nhours>=13) nhours-=12;

nhours-=12;
is shorthand for:
nhours=nhours-12;

Also, if the hour is 0, we know that is 12 A.M., so we need to make the zero into a 12. if (nhours==0) nhours=12;

Now, when the number of hours is 14, the script changes it to 14-12=2. Just what we needed.

We don't have the same problem for the minutes and seconds, but they present a problem of their own. Suppose the number of minutes into the hour is 32. This value is fine, the script will display a 32. However, what if the value is 2? The script would display something like this:

11:2

What? Yes, we need a way to get a zero in there so the clock is readable. We want it to say 11:02. So now we need something to add in a zero before the 2 if the number of minutes (nmins) is less than 10. Let's try this:

if (nmins<10)
nmins="0"+nmins;

This code will add in the character 0 in front of the 2 if the number of minutes is less than ten. Another little problem out of the way, but we will also need to do this for the seconds:

if (nsecn<10)
nsecn="0"+nsecn;
if (nmins<10)
nmins="0"+nmins;

Had enough? Me too, but this clock still has another value we need to get. The clock displays A.M. or P.M. for morning and evening hours. This isn't to terrible. We can define another variable, let's call it AorP. We need the value to be "P.M." if the hour is greater than 12, and "A.M." otherwise. Here we go:

if (nhours>=12)
AorP="P.M.";
else
AorP="A.M.";

One problem though. You need to place this section of code before our code that changes the clock to a twelve hour system. Otherwise, the hours will never get past 12, and it will always read A.M. Why? This is because when we change the clock to the twelve hour system, we change the value of nhours so that it is 0-12 in all cases. So, we must get our AorP value before we change the time system.

Now, I'll give you the code for the script:

<HEAD>
<SCRIPT language="JavaScript">
function startclock()
{
var thetime=new Date();

var nhours=thetime.getHours();
var nmins=thetime.getMinutes();
var nsecn=thetime.getSeconds();
var AorP=" ";

if (nhours>=12)
    AorP="P.M.";
else
    AorP="A.M.";

if (nhours>=13)
    nhours-=12;

if (nhours==0)
 nhours=12;

if (nsecn<10)
 nsecn="0"+nsecn;

if (nmins<10)
 nmins="0"+nmins;

document.clockform.clockspot.value=nhours+":"+nmins+":"+nsecn+" "+AorP;

setTimeout('startclock()',1000);

} 

//-->
</SCRIPT>
</HEAD>
<BODY onLoad="startclock()">
<FORM name="clockform">
Current Time: <INPUT TYPE="text" name="clockspot" size="15">
</FORM>
</BODY>

You may have noticed we are accessing a form value and changing it in this line:

document.clockform.clockspot.value=nhours+":"+nmins+":"+nsecn+" "+AorP;

So, you now know we need a form in the body of the document. Here is the one that goes with the script:

<FORM name="clockform">
Current Time: <INPUT TYPE="text" name="clockspot" size="15">
</FORM>

Also, you can see that we use the setTimeout() function to run our startclock() function again after one second. In this way, the clock will refresh every second so that you get a constantly running clock with the seconds ticking away.

Of course, how do we get the thing started to begin with? The browser won't just run the startclock() function on its own. It needs some kind of event to happen. Well, how about when the page loads? Excellent choice, let's use the onLoad event. The onLoad command is used as an attribute in the body tag, much like defining a text color:

<BODY text="lime">

I'm not sure I could handle that text color for long, but now we can see how the onLoad command will be put to work:

<BODY onLoad="startclock()">

Nice, isn't it? The command works like the other event handlers, we are able to use it to call our javascript function. This is what gets the clock ticking.

Now, you can go make use of this clock if you need one. Otherwise, you have gotten a rather unorthodox introduction to objects and object-oriented programming. Well, maybe I'll add a more orthodox tutorial on the subject sometime, if I can stop saying the word orthodox. You know, I think the last half of this paragraph has been extremely unorthodox. Oops, I think I had better get going now..

Well, that does it for now, see you in the next section .

---